<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件与循环</title>
    <!-- 1.引入本地资源-->
    <script src="../js/vue-dev.js"></script>
    <!-- 2.引入外部资源-->
    <!--<script src="https://unpkg.com/vue"></script>-->
</head>

<body>
    <div id="app">
        <p v-if="seen">现在你可以看见我，是因为我设置我v-if的指令，并且设置为true</p>
    </div>
    <div id="app-for">
        <ol>
            <li v-for="tool in tools">
                {{tool.text}}
            </li>
        </ol>
    </div>

    <script>
        /*
            1、true、字符串、数字、对象都为true
            2、null、空字符串、false为false
         */
        var app = new Vue({
            el:'#app',
            data:{
                seen:true
            }
        });
        var app_for = new Vue({
            el:'#app-for',
            data:{
                /*
                    1、数组用[]声明，里面的内容采用json对象声明
                    2、在控制台里，输入 app_for.tools.push({ text: '新项目' })，
                 */
                tools:[
                    {text:'循环展示1'},
                    {text:'循环展示2'},
                    {text:'循环展示3'}
                ]
            }
        })
    </script>

</body>

</html>